import * as echarts from '@/components/ec-canvas/echarts.js';

import moduleStore from '@/store/module';
import { createStoreBindings } from '@/miniprogram_npm/mobx-miniprogram-bindings/index';

import tools from '@/utils/tools';
import { getElectricityPrediction } from '@/service/api/predict';

import Message from 'tdesign-miniprogram/message/index';
const messageDefaultConfig = (content) => {
    return {
        content: content,
        offset: [60, 32],
        duration: 2000
    };
};

import GZ_geoJson from './geoJSON/GZ_geoJson';
import { initChart, electricityConsumptionChartOption } from '@/utils/echart';

const mapChartOption = (zoom) => {
    return {
        series: [
            {
                name: '广州各区',
                type: 'map',
                map: 'guangzhou',
                roam: true,
                zoom: zoom
            }
        ]
    };
};

function initMap(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
    });
    canvas.setChart(chart);
    echarts.registerMap('guangzhou', GZ_geoJson);
    return chart;
}

let mapChart;
let barChart;
let mapScale = 1;
let currentZone = '全市合计';

const stepValue = [
    { label: '7天', value: 7 },
    { label: '15天', value: 15 },
    { label: '30天', value: 30 }
];

Page({
    data: {
        step: 7,
        stepValue,
        pickerVisible: false,
        mapEc: {
            onInit: initMap
        },
        barEc: {
            onInit: initChart
        }
    },

    onLoad() {
        this.storeBindings = createStoreBindings(this, {
            store: moduleStore,
            fields: ['electricityData'],
            actions: ['getElectricityData']
        });
    },

    onUnload() {
        this.storeBindings.destroyStoreBindings();
    },

    refreshData() {
        if (!barChart || !mapChart) return;
        const { xData, yData } = this.getElectricityData(currentZone, this.data.step);

        mapScale = 1;
        mapChart.clear();
        mapChart.setOption(mapChartOption(mapScale));

        barChart.clear();
        barChart.setOption(electricityConsumptionChartOption(xData, yData, currentZone));
    },

    async onReady() {
        try {
            if (this.data.electricityData.length === 0) {
                await getElectricityPrediction();
            }
            this.refreshData();
        } catch (err) {
            Message.error(messageDefaultConfig(err.message));
        }
    },

    handleRefresh: tools.throttle(async function () {
        try {
            await getElectricityPrediction();
            this.refreshData();
        } catch (err) {
            Message.error(messageDefaultConfig(err.message));
        }
    }, 10000),

    handleChangeStep() {
        this.setData({
            pickerVisible: true
        });
    },

    pickerChange(e) {
        if (e.detail.value === this.data.step) return;
        this.setData({
            step: e.detail.value
        });
        if (!barChart) return;
        barChart.clear();
        const { xData, yData } = this.getElectricityData(currentZone, this.data.step);
        barChart.setOption(electricityConsumptionChartOption(xData, yData, currentZone));
    },

    handleZoomIn() {
        if (mapScale == 5) {
            Message.warning(messageDefaultConfig('已缩放到最大'));
            return;
        }
        mapChart.setOption(mapChartOption(++mapScale));
    },

    handleZoomOut() {
        if (mapScale == 1) {
            Message.warning(messageDefaultConfig('已缩放到最小'));
            return;
        }
        mapChart.setOption(mapChartOption(--mapScale));
    },

    mapChartInitFinished(e) {
        mapChart = e.detail;
        mapChart.setOption(mapChartOption(mapScale));
    },

    barChartInitFinished(e) {
        barChart = e.detail;
        const { xData, yData } = this.getElectricityData(currentZone, this.data.step);
        barChart.setOption(electricityConsumptionChartOption(xData, yData, currentZone));
    },

    handleChartTap(e) {
        barChart.clear();
        if (e.type === 'click-none') {
            currentZone = '全市合计';
        } else {
            currentZone = e.detail.data.name;
        }
        const { xData, yData } = this.getElectricityData(currentZone, this.data.step);
        barChart.setOption(electricityConsumptionChartOption(xData, yData, currentZone));
    }
});
